<template>
	<view class="container">
		<block v-if="isload">
			<view class="map_bg">
				<view v-if="psorder.status==0 || psorder.status==1">
					<view style="text-align: center;font-weight: bold;">
						<text>用户地理位置</text>
					</view>
					<map class="map" :style="'height:'+map_height+'rpx;'" :longitude="longitude_center"
						:latitude="latitude_center" :scale="scale" minScale="11" maxScale="20" :polyline="polyline"
						:markers="markers" @markertap="markerTap"></map>
					<view @click="is_maps" style="text-align: center;">
						<text v-if="!is_map">附近订单数量：{{markers.length-3}}</text>
						<image class="detail_info" v-if="!is_map" src="https://ksdaojiajia.com/mp-weixin/static/img/expand.png"></image>
						<image class="detail_info" v-if="is_map" src="https://ksdaojiajia.com/mp-weixin/static/img/fold.png"></image>
					</view>
				</view>
			</view>
			<view class="order-box">
				<view class="head">
					<view style="font-size:35rpx;font-weight: bold;">
						<view><text>{{prolist[0].name}}</text></view>
					</view>
					<view class="flex1">
						<text style="font-size: 30rpx;margin-left: 30rpx;">x{{prolist[0].num}}</text>
					</view>

					<view style="font-size: 30rpx;font-weight: bold;color: black;" @tap="daohang">
						<text class="x1">{{psorder.juli2}}</text>
						<text class="x2">{{psorder.juli2_unit}}</text>
						<text style="color: green;margin-left: 10rpx;">导航</text>
					</view>
					<view :data-index="index" data-protype="0" @tap="daohang"
						style="display: flex;justify-content: center;align-items: center;">
						<image style="height: 40rpx; width: 40rpx;" src="https://ksdaojiajia.com/mp-weixin/static/img/daohang.png"></image>
					</view>
				</view>

				<view class="content" style="border-bottom:0">

					<block v-if="!orderinfo.protype">
						<view style="display: flex;justify-content: center;align-items: center;">
							<image class="title_img1" :src="prolist[0].pic" @click="previewImage"
								:data-url="prolist[0].pic" mode="aspectFit" />
						</view>
						<view style="display: flex;justify-content: center;align-items: center;margin-left: 15rpx;">
							<view class="f2" @tap="daohang">
								<view class="t3">{{orderinfo.address}}</view>
								<view class="divider"></view>
								<view>{{orderinfo.area}} , {{orderinfo.address}}</view>
								<view class="divider"></view>
								<view v-if="psorder.ticheng>0"><text style="color: green;">用户已支付，</text>服务到手：<text
										style="color: green;font-size: 40rpx;">{{psorder.ticheng}}</text>元</view>
								<view v-else @tap.stop="detail_price(psorder)" style="margin-top: 20rpx;">
									<text style="color: red;">自主谈价，</text>
									先做后付：
									<text v-if="psorder.status==4"><text style="color: black;font-size: 40rpx;">{{psorder.ticheng}}</text>元</text>
									<text v-else style="border: 1rpx solid #999;color: #999;padding: 0rpx 10rpx;margin-left: 10rpx;border-radius: 8rpx;font-size: 30rpx;">收费标准</text>
								</view>
								<view v-if="psorder.refund_money_end > 0" style="color: red;">
									用户退款：{{psorder.refund_money_end}}元，原因：{{psorder.refund_reason}}
								</view>
							</view>
						</view>

					</block>
					<block v-else>
						<view class="f1">
							<view class="t3" style="text-align: center; "><text class="x1"><text
										style="font-size: 10rpx;">距离</text>{{item.juli2}}</text><text
									class="x2">{{item.juli2_unit}}</text></view>

						</view>
						<view class="f2">
							<view class="t3">{{orderinfo.address}}</view>
							<view class="t2">{{orderinfo.area}}</view>
						</view>

					</block>
				</view>
				<view style="display: grid;grid-template-columns: 1fr auto;justify-content: center;">
					<view @tap="call" :data-tel="orderinfo.tel">
						<view>姓名：{{orderinfo.linkman}}</view>
						<view>号码：{{orderinfo.tel}}</view>
					</view>
					<view v-if="address_pic && psorder.status != 0" @tap="address_pics"
					style="border: 1rpx solid #999;padding: 5rpx;border-radius: 10rpx;display: flex;justify-content: center;font-size: 30rpx;font-weight: bold;line-height: 60rpx;margin-right: 50rpx;">
						查看门口图片
					</view>
				</view>
				
				<view class="divider"></view>
				<view class="f2">
					<view v-if="psorder.fwtype==1">
						<view class="f1" v-if="psorder.status==3">
							核实中
						</view>
						<view class="f1" v-if="psorder.status==4">
							已完成
						</view>
						<view class="f1" v-if="psorder.status==1">
							{{orderinfo.yydate}}<text class="t1">预计上门时间</text>
						</view>
						<view class="f1" v-if="psorder.status==2">
							<text class="t1" style="margin-left:10rpx">服务中</text>
						</view>
					</view>
					<view v-else-if="psorder.fwtype==2">
						<view class="f1" v-if="psorder.status==3">
							核实中
						</view>
						<view class="f1" v-if="psorder.status==4">
							已完成
						</view>
						<view class="f1" v-else-if="psorder.status==1">
							期望上门时间:<text class="t1">{{orderinfo.yydate}}</text>
						</view>
						<view class="f1" v-else-if="psorder.status==2">
							已到达，服务中
						</view>
						<view class="f1" v-if="psorder.status==1" style="color: red;">
							请立即上门，
							<text class="t1" style="font-size: 30rpx;font-weight: bold;">剩余：<text
									style="font-size: 35rpx;">{{psorder.remain_time}}分钟</text></text>
						</view>
					</view>
				</view>
			</view>

			<view class="orderinfo">
				<view class="box-title">商品清单</view>
				<view v-for="(item, idx) in prolist" :key="idx" class="item">
					<text class="t1 flex1">{{item.name}} {{item.ggname}}</text>
					<text class="t2 flex0">×{{item.num}} </text>
				</view>
				<view v-if="isExpand">
					<view class="item">
						<text class="t1">订单编号：</text>
						<text class="t2" user-select="true" selectable="true">{{orderinfo.ordernum}}</text>
					</view>
					<view class="item">
						<text class="t1">下单时间：</text>
						<text class="t2">{{dateFormat(orderinfo.createtime)}}</text>
					</view>

					<view class="item" v-if="psorder.status!=0">
						<text class="t1">接单时间：</text>
						<text class="t2">{{dateFormat(psorder.starttime)}}</text>
					</view>

					<view class="item" v-if="psorder.daodiantime">
						<text class="t1">{{yuyue_sign?'出发时间':'到达时间'}}</text>
						<text class="t2">{{dateFormat(psorder.daodiantime)}}</text>
					</view>
					<view class="item" v-if="psorder.sign_time">
						<text class="t1">开始时间</text>
						<text class="t2">{{dateFormat(psorder.sign_time)}}</text>
					</view>
					<view class="item" v-if="psorder.endtime">
						<text class="t1">完成时间</text>
						<text class="t2">{{dateFormat(psorder.endtime)}}</text>
					</view>

				</view>
				<view style="width: 100%;" @click="isExpands">
					<image class="detail_info" v-if="!isExpand" src="https://ksdaojiajia.com/mp-weixin/static/img/expand.png"></image>
					<image class="detail_info" v-if="isExpand" src="https://ksdaojiajia.com/mp-weixin/static/img/fold.png"></image>
				</view>
			</view>

			<view class="orderinfo" v-if="orderinfo.formdata.length > 0">
				<view class="box-title">服务信息</view>
				<view class="item" v-for="item in orderinfo.formdata" :key="index"
					v-if="(orderinfo.formdata).length > 0">
					<text class="t1">{{item[0]}}</text>
					<view class="t2" v-if="item[2]=='upload'">
						<image :src="item[1]" style="width:400rpx;height:auto" mode="widthFix" @tap="previewImage"
							:data-url="item[1]" />
					</view>
					<text class="t2" v-else user-select="true" selectable="true">{{item[1]}}</text>
				</view>
			</view>

			<view class="orderinfo" v-if="psorder.status==2 || psorder.status>=3">
				<view >
					<!-- 图片上传 -->
					<view class="box-title" v-if="psorder.status==2">完工图片上传：</view>
					<view class="box-title" v-if="psorder.status>=3">完工图片：</view>
					<view class="" v-for="(items, index) in Array.from({ length: num }, (_, index) => index + 1)"
						:key="index">
						<view class="over_time_title">完工第{{index + 1}}个</view>
						<view class="item" style="margin-bottom: 10rpx;">
							<view class="flex">
								<view class="form-imgbox" style="width: 33.3%;"
									v-for="(value, key) in over_thumb[index]['necessary']" :key="key">
									<view class="form-imgbox-img" v-if="value != ''">
										<image class="delete_img" v-if="psorder.status<3" @tap="removeimg(key,index)"
											src="https://ksdaojiajia.com/mp-weixin/static/img/ico-del.png">
											<image class="image" :src="value" @click="previewImage" :data-url="value"
												mode="aspectFit" />
									</view>

									<view v-else class="form-uploadbtn"
										:style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'50rpx 50rpx',backgroundColor:'#F3F3F3'}"
										@click="editorChooseImage(key,index)" :data-oid="psorder.id"></view>
									<view style="text-align: center; margin-top: -20rpx;">
										<text style="color: red; ">{{key}}</text>
									</view>
								</view>
							</view>
						</view>


						<view class="t1">其他图片(选填)：</view>

						<view class="item" v-if="psorder.status==2 || psorder.status>=3">
							<view class="flex">
								<view class="form-imgbox">
									<view class="form-imgbox-img" style="float: left;"
										v-for="(item2, index1) in over_thumb[index]['order_img']" :key="index1">
										<image class="delete_img" v-if="psorder.status<3"
											@tap="removeimg_other(index1, index)" src="https://ksdaojiajia.com/mp-weixin/static/img/ico-del.png">
										</image>
										<image class="image" :src="item2" @click="previewImage" :data-url="item2"
											width="150rpx" height="150rpx" mode="aspectFit" />
									</view>

									<view class="form-uploadbtn"
										v-if="psorder.status<3 && over_thumb[index]['order_img'].length < 15"
										style="float: left;"
										:style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'50rpx 50rpx',backgroundColor:'#F3F3F3'}"
										@click="editorChooseImage_other(index)" :data-oid="psorder.id"></view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			
			<view class="orderinfo" v-if="psorder.status==2">
				<view class="box-title">工单备注（选填）:</view>
				<view>
					<textarea class='textarea' placeholder="请输入工单备注" v-model="worker_remark" />
				</view>
			</view>
			
			<view class="orderinfo" v-if="psorder.status>2">
				<view class="box-title">工单备注:</view>
				<view>
					<text>{{worker_remark?worker_remark:'无'}}</text>
				</view>
				
				<view class="box-title">辅材明细:</view>
				<view>
					<text>辅材收费：{{over_type.money}}元</text>
				</view>
				
				<view>
					辅材：<text>{{over_type.peijian.join('，')}}</text>
				</view>
			</view>

			<view style="width:100%;height:120rpx"></view>
			<view class="bottom" v-if="psorder.status!=4">
				<view class="f1" v-if="psorder.status!=0" @tap="call" :data-tel="orderinfo.tel">
					<image src="https://ksdaojiajia.com/mp-weixin/static/peisong/tel1.png" class="img" />联系顾客
				</view>


				<view class="btn1" @tap="qiangdan" :data-id="psorder.id" v-if="psorder.status==0 && !psorder.over_time">
					立即接单</view>
				<view class="btn1" style="background: #BCBFC7;" v-if="psorder.status==0 && psorder.over_time">
					{{psorder.over_time}}后可接单
				</view>


				<block v-if="psorder.fwtype==1">
					<view class="btn1" @tap="setst" :data-id="psorder.id" data-st="2" v-if="psorder.status==1">顾客已到达
					</view>
					<view class="btn1" @tap="setst" :data-id="psorder.id" data-st="3" v-if="psorder.status==2">我已完成
					</view>
				</block>
				<block v-if="psorder.fwtype==2">

					<block v-if="psorder.status==1">
						<block v-if="yuyuecar && psorder.protype && needstartpic">
							<view class="btn1" @tap.stop="goto"
								:data-url="'/pagesA/yuyuecar/uppic?id='+psorder.id+'&st=2'">我已到达</view>
						</block>
						<block v-else>
							<view class="btn1" @tap="setst" :data-id="psorder.id" data-st="2">我已上门</view>
						</block>
					</block>

					<block v-if="psorder.status==2">
						<block v-if="yuyuecar && psorder.protype && needendpic">
							<view class="btn1" @tap.stop="goto"
								:data-url="'/pagesA/yuyuecar/uppic?id='+psorder.id+'&st=3'">我已完成</view>
						</block>
						<block v-else>
							<view class="btn1" @tap="show_money_detail_fun" :data-id="psorder.id" data-st="3">我已完成
							</view>
						</block>
					</block>
					<view class="btn1" v-if="psorder.status==3" style="background: #f1f1f1;color:#333">核实中</view>
					<view class="btn1" v-if="psorder.status==4" style="background: #f1f1f1;color:#333">已完成</view>
				</block>
			</view>
		</block>
		
		<view class="" v-if="show_money_detail">
			<view class="mask"></view>
			<view class="cost_detail" >
				<view class="" v-if="collection_peijian">
					<view>
						<view style="font-size: 30rpx;font-weight: bold;">请选择收费项目：</view>
						<view class="classifyBigBox">
							<view class="oneClassify flex" :class="{selectActive:selected[item.id]==true}"
								v-for="(item,i) in classifyList" @click="onSelectClassify(item.id)">
								{{item.name}}
							</view>
						</view>
						<view style="width: 100%;height: 1rpx;;background-color: #000;"></view>
					</view>
			
				</view>
			
				<view style="color: red;display: flex;padding: 20rpx;">
					<text class="box-title" style="color:red;width: 40%;margin: auto;">* 辅材总计收费：</text>
					<block>
						<input type="number" style="border: 1px solid #c3c3c3;width: 60%;height: 70rpx;border-radius: 10px;"
							v-model="collection" placeholder="请输入真实收款金额(元)" placeholder-style="font-size:28rpx"
							@input="collection_fun" />
						<text style="color:red;margin: auto;">元</text>
					</block>
				</view>
				<view style="color: #747474;margin-top: 10rpx;">注意：用户端确认后即可完成工单（实时到账）</view>
				
				<view class="tl-flex-center1">
					<view @click="onClear" class="tl-btn-120">关闭</view>
					<view @click="onConfirmFiltrate" class="onConfirmFiltrate" :data-id="psorder.id" data-st="3">提交完工</view>
				</view>
			</view>
		</view>
		
		<view class="posterDialog" v-if="showposter">
			<view class="main">
				<view class="close" @tap="posterDialogClose">
					<image class="img" src="https://shequ.futurestore.top/mp-weixin/static/img/close.png" />
				</view>
				<view class="content">
					<image class="img" :src="address_pic" mode="widthFix" @tap="previewImage" :data-url="address_pic">
					</image>
				</view>
			</view>
		</view>
		
		<view>
			<view v-if="show_detail_price" class="popup">
				<view class="popup-box">
					<view style="font-size: 40rpx;text-align: center;">收费区间：</view>
					<view v-if="fee_range_arr.length > 0" style="font-size: 30rpx;">
						<view v-for="(item, index) in fee_range_arr" :key="item.id">
							<view>收取用户 {{item[0]}}~{{item[1]}} 元，将扣除余额 {{item[2]}} 元</view>
						</view>
						<view>超出金额按照上述最大金额计算</view>
					</view>
					
					<view v-else style="font-size: 30rpx;">该订单完工后扣除余额 {{fee_range_str}} 元</view>
					
					<view class="btn-box">
						<view class="confirm btn" @click="detail_price">确定</view>
					</view>
				</view>
			</view>
		</view>

		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	var interval2 = null;
	export default {
		data() {
			return {
				over_thumb: [],
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				orderinfo: {},
				prolist: [],
				worker: {},
				binfo: {},
				psorder: {},
				yuyue_sign: false,
				nowtime2: '',
				map_height: 500,
				yuyuecar: false,
				cancancel: false,
				needstartpic: false,
				startpic: '',
				needendpic: false,
				endpic: '',
				isExpand: false,
				is_map: false,
				up_count: 0,
				scale: 16,
				longitude_center: 0,
				latitude_center: 0,
				orderinfo: {},
				polyline: [],
				markers: [],
				juli: 20,
				collection: '',
				num: 0,
				classifyList: [], //所以分类数组
				selected: {}, //选取的分类 ,用对象更方便存取数据
				collection_peijian: false,
				show_money_detail: false,
				over_collection_type: [],
				worker_remark: "",
				over_type: {},
				address_pic: '',
				showposter: false,
				show_detail_price: false,
				fee_range_arr: [],
				fee_range_str: ''
			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();

		},
		onUnload: function() {
			clearInterval(this.interval2);
		},
		onPullDownRefresh: function() {
			// this.getdata();
		},
		methods: {
			editorChooseImage: function(types, index) {
				var that = this;
				app.chooseImage(function(urls) {
					that.over_thumb[index]['necessary'][types] = urls[0];
					app.post('ApiYuyueWorker/setfield', {
						img_content: JSON.stringify(that.over_thumb),
						id: that.psorder.id
					});
				}, 1)
				that.up_count++;
			},
			editorChooseImage_other: function(index) {
				var that = this;
				app.chooseImage(function(urls) {
					for (var cache of urls) {
						that.over_thumb[index]['order_img'].push(cache);
					}
					app.post('ApiYuyueWorker/setfield', {
						img_content: JSON.stringify(that.over_thumb),
						id: that.psorder.id
					})
				}, 15);
			},
			removeimg: function(types, index) {
				//删除图片索引，删除数组
				this.over_thumb[index]['necessary'][types] = '';
				if (this.up_count > 0)
					this.up_count--;
				// this.psorder.over_thumb = "";
			},
			removeimg_other: function(index1, index) {
				//删除图片索引，删除数组
				this.over_thumb[index]['order_img'].splice(index1, 1);
				// this.psorder.over_thumb = "";
			},

			getdata: function() {
				var that = this;
				app.get('ApiYuyueWorker/orderdetail', {
					id: that.opt.id
				}, function(res) {
					if (res.status == 0) {
						app.alert(res.msg)
						setTimeout(function() {
							app.goto('dating');
						}, 1000);
					}
					that.orderinfo = res.orderinfo;
					that.num = res.prolist[0].num;
					if (res.prolist[0]['is_one_pic']) {
						//桶装水
						that.num = 1;
					}
					that.prolist = res.prolist;
					that.binfo = res.binfo;
					that.psorder = res.psorder;
					that.worker = res.worker;
					that.yuyue_sign = res.yuyue_sign;
					that.nowtime2 = res.nowtime;
					that.over_thumb = res.over_thumb;
					that.over_type = res.over_type;
					that.worker_remark = res.worker_remark;
					that.address_pic = res.address_pic;
					var over_collection_type = res.over_collection_type;
					that.over_collection_type = over_collection_type;

					var classifyList = [];

					for (let i = 0; i < over_collection_type.length; i++) {
						var cache = {}
						cache.id = i;
						cache.name = over_collection_type[i]
						classifyList.push(cache);
					}
					that.classifyList = classifyList;


					if (res.isdelayed) {
						clearInterval(interval2);
						interval2 = setInterval(function() {
							that.nowtime2 = that.nowtime2 + 1;
							that.getdjs();
						}, 1000);
					}
					if (res.yuyuecar) {
						that.yuyuecar = true
						if (res.cancancel) {
							that.cancancel = res.cancancel;
						}
						if (res.needstartpic) {
							that.needstartpic = res.needstartpic;
						}
						if (res.needendpic) {
							that.needendpic = res.needendpic;
						}
					}
					that.loaded();

					var markers = [{
						id: -1,
						callout: {
							color: '#000000', // 文本颜色
							bgColor: '#55ffff', // 背景色
							borderColor: '#000000',
							display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
							fontSize: 13,
							textAlign: 'left', // 文本对齐方式。有效值: left, right, center
							padding: 5, // 文本边缘留白
							borderRadius: 5,
							content: that.prolist[0].name + ' x' + that.prolist[0].num + '\n距离：' + that
								.psorder.juli2 + that.psorder.juli2_unit
						},
						zIndex: 999,
						latitude: parseFloat(that.psorder.latitude2),
						longitude: parseFloat(that.psorder.longitude2),
						iconPath: 'https://ksdaojiajia.com/mp-weixin/static/peisong/marker_kehu.png',
						width: 44,
						height: 54
					}, {
						id: -2,
						zIndex: 999,
						latitude: parseFloat(that.worker.latitude),
						longitude: parseFloat(that.worker.longitude),
						iconPath: 'https://ksdaojiajia.com/mp-weixin/static/peisong/marker_worker.png',
						width: 44,
						height: 54
					}]

					that.longitude_center = that.psorder.longitude2;
					that.latitude_center = that.psorder.latitude2;
					that.markers = markers;

					var polyline = [{
						color: '#FF0000DD', // 线的颜色，需要符合CSS颜色规范
						width: 2, // 线的宽度
						dottedLine: true, // 是否画虚线，默认为falses
					}]

					var points = [];
					var position = {};
					position.longitude = parseFloat(that.worker.longitude);
					position.latitude = parseFloat(that.worker.latitude);
					points.push(position);
					position = {};
					position.longitude = parseFloat(that.psorder.longitude2);
					position.latitude = parseFloat(that.psorder.latitude2);
					points.push(position);
					polyline[0].points = points;
					that.polyline = polyline;

					//附近订单显示
					app.post('ApiYuyueWorker/order_bounds', {
						// pernum: 20,
						juli: that.juli,
						worker_orderid: that.opt.id
					}, function(res) {
						var data = res;
						for (var v of data) {
							var cache = {
								iconPath: 'https://ksdaojiajia.com/mp-weixin/static/peisong/weixiu.png',
								width: 44,
								height: 54
							};
							var id = 0;
							if (v.id > 0) id = v.id;
							cache.id = id;
							cache.latitude = parseFloat(v.latitude2);
							cache.longitude = parseFloat(v.longitude2);

							var content = v.prolist[0].name + ' x' + v.prolist[0].num;
							var bgColor = '#d2f460';
							if (v.over_time != 0) {
								content += '\n剩余：' + v.over_time;
								bgColor = '#dfdfdf';
							}

							var callout = {
								color: '#000000', // 文本颜色
								bgColor: bgColor, // 背景色
								display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
								fontSize: 13,
								textAlign: 'left', // 文本对齐方式。有效值: left, right, center
								padding: 5, // 文本边缘留白
								borderRadius: 5,
								content: content
							}
							cache.callout = callout;

							that.markers.push(cache);
						}
					});

				});
			},
			getdjs: function() {
				var that = this;
				var nowtime = that.nowtime2;
				var psorder = that.psorder
				var totalsec = psorder.createtime * 1 + psorder.delayedtime * 60 - nowtime * 1;
				if (totalsec <= 0) {
					that.psorder.isqd = true;
				} else {
					var houer = Math.floor(totalsec / 3600);
					var min = Math.floor((totalsec - houer * 3600) / 60);
					var sec = totalsec - houer * 3600 - min * 60;
					var djs = (min < 10 ? '0' : '') + min + '分' + (sec < 10 ? '0' : '') + sec + '秒';
				}
				that.psorder.djs = djs;
			},
			qiangdan: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				uni.showModal({
					title: '确定要接单吗？',
					content: '请在60分钟内上门，若取消订单需要审核',
					success: function(res) {
						if (res.confirm) {
							app.showLoading('提交中...');
							app.post('ApiYuyueWorker/qiangdan', {
								id: id
							}, function(data) {
								app.showLoading(false);
								if (data.status == 1) {
									app.success(data.msg);
									setTimeout(function() {
										app.goto('jdorderlist', 'reLaunch');
									}, 1000);
								} else {
									app.alert(data.msg);
									setTimeout(function() {
										app.goto('dating', 'reLaunch');
									}, 1000);

								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			setst: function(info) {
				var that = this;
				// var inspect = 0;
				// for (var key in that.over_thumb['necessary']) {
				// 	if (that.over_thumb['necessary'][key] == "")
				// 		inspect++;
				// }
				var collection = info.collection;
				if (that.prolist[0]['is_one_pic']) {
					//桶装水
					// collection.money = 0;
				}else{
					if (that.psorder.status == 2 && (collection.money == '' || (collection.money != 0 && (collection.peijian.length == 0 && that.over_collection_type.length != 0)))) {
						uni.showToast({
							title: '请输入辅材收费金额和配件选择',
							icon: 'none'
						})
						return false
					}
				}
				
				// if ((that.psorder.status == 2 || that.psorder.status == 3) && inspect > 0) {
				// 	uni.showToast({
				// 		title: '请上传完成图片',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				var id;
				var st;
				if (collection == undefined) {
					id = info.currentTarget.dataset.id;
					st = info.currentTarget.dataset.st;
				} else {
					id = info.id;
					st = info.st;
				}
				
				if (st == 3 && that.prolist[0]['is_one_pic']) {
					//桶装水
					collection.money = 0;
				}
				
				if (st == 2) {
					var tips = '确定已到达吗?';
					app.confirm(tips, function() {
						app.showLoading('提交中');
						app.post('ApiYuyueWorker/setst', {
							id: id,
							st: st
						}, function(data) {
							app.showLoading(false);
							if (data.status) {
								app.success(data.msg);
								setTimeout(function() {
									that.getdata();
								}, 1000);
							} else {
								that.show_money_detail = false;
								app.alert(data.msg);
							}
						});
					});
				}
				if (st == 3) {
					app.showLoading('提交中');
					app.post('ApiYuyueWorker/setst', {
						id: id,
						st: st,
						collection: JSON.stringify(collection),
						worker_remark: that.worker_remark
					}, function(data) {
						app.showLoading(false);
						if (data.status) {
							app.success(data.msg);
							that.show_money_detail = false;
							setTimeout(function() {
								that.getdata();
							}, 1000);
						} else {
							that.show_money_detail = false;
							app.alert(data.msg);
						}
					});
				}


			},

			daohang: function(e) {
				var that = this;
				var datainfo = that.psorder;
				var binfo = that.binfo
				var orderinfo = that.orderinfo
				var protype = e.currentTarget.dataset.protype;
				var list = ['导航到用户'];
				// if (protype) {
				// 	list = ['导航到用户'];
				// }
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						if (res.tapIndex >= 0) {
							// if (res.tapIndex == 0) {
							// 	if (!protype) {
							// 		var longitude = datainfo.longitude
							// 		var latitude = datainfo.latitude
							// 		var name = binfo.name
							// 		var address = binfo.address
							// 	} else {
							// 		var longitude = datainfo.longitude2
							// 		var latitude = datainfo.latitude2
							// 		var name = orderinfo.address
							// 		var address = orderinfo.address
							// 	}
							// } else {
							// 	var longitude = datainfo.longitude2
							// 	var latitude = datainfo.latitude2
							// 	var name = orderinfo.address
							// 	var address = orderinfo.address
							// }
							var longitude = datainfo.longitude2
							var latitude = datainfo.latitude2
							var name = orderinfo.address
							var address = orderinfo.address
							uni.openLocation({
								latitude: parseFloat(latitude),
								longitude: parseFloat(longitude),
								name: name,
								address: address,
								scale: 13
							})
						}
					}
				});
			},
			call: function(e) {
				var tel = e.currentTarget.dataset.tel;
				if (tel.indexOf('*') > -1) return;
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			isExpands: function(e) {
				var that = this;
				that.isExpand = !that.isExpand;
			},
			is_maps: function(e) {
				var that = this;
				if (that.is_map) {
					that.map_height = 500;
				} else {
					that.scale = 13;
					that.map_height = 1000;
				}
				that.is_map = !that.is_map;

			},
			markerTap(e) {
				//点击地图点位
				var res = e.detail;
				var markerId = res.markerId;
				var latitude = res.latitude;
				var longitude = res.longitude;
				if (markerId > 0) app.goto('jdorderdetail?id=' + markerId);
			},
			//选取分类
			onSelectClassify(id) {
				this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
			},
			//重置
			onClear() {
				this.show_money_detail = false
			},
			//提交筛选
			onConfirmFiltrate(e) {
				let select = [] //选择的筛选结果数组
				const {
					classifyList,
					selected
				} = this

				//Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
				Object.keys(selected).forEach(key => {
					if (selected[key]) {
						for (let i = 0; i < classifyList.length; i += 1) {
							classifyList[i].id == key ? select.push(classifyList[i]) : ''
						}

					}
				})
				var collection_info = {};
				collection_info.money = this.collection;
				var cache = [];
				for (let i = 0; i < select.length; i++) {
					cache.push(select[i].name);
				}
				collection_info.peijian = cache

				var info = {};
				info.collection = collection_info;
				info.id = e.currentTarget.dataset.id;
				info.st = e.currentTarget.dataset.st;
				this.setst(info);
			},
			collection_fun(e) {
				var value = e.detail.value;
				if (!(value > 0) || this.over_collection_type.length == 0) {
					this.collection_peijian = false;
					return;
				}
				this.collection_peijian = true;

			},
			show_money_detail_fun(e) {
				var that = this;
				if (this.prolist[0]['is_one_pic']) {
					//是桶装水，不显示金额输入
					this.collection = 0;
					app.confirm('确定完工吗？', function() {
						that.onConfirmFiltrate(e);
					});
				}else{
					this.show_money_detail = true;
				}
				
			},
			close_collection_money() {
				this.show_money_detail = false;
			},
			clooseModal() {
				this.showModal = false
			},
			posterDialogClose: function() {
				this.showposter = false;
			},
			address_pics: function() {
				this.showposter = true;
			},
			detail_price(item) {
				//先做后付价格详情
				// app.alert('价格表正在努力的制作啦~~');
				this.show_detail_price = !this.show_detail_price;
				
				if (item) {
					this.fee_range_arr = item.fee_range_arr;
					this.fee_range_str = item.ticheng;
				}
			}
		}
	}
</script>
<style>
	.delete_img {
		/* float: right; */
		/* right: 0; */
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		margin-left: 140rpx;
		margin-top: -30rpx;
		/* margin-top: -5rpx; */
		/* top: 5rpx; */
		z-index: 1;

	}


	.map {
		width: 100%;
		height: 500rpx;
		overflow: hidden
	}

	.ordertop {
		width: 100%;
		height: 220rpx;
		padding: 50rpx 0 0 70rpx
	}

	.ordertop .f1 {
		color: #fff
	}

	.ordertop .f1 .t1 {
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx
	}

	.ordertop .f1 .t2 {
		font-size: 24rpx
	}

	.order-box {
		width: 94%;
		margin: 20rpx 3%;
		padding: 6rpx 3%;
		background: #fff;
		border-radius: 8px
	}

	.order-box .head {
		display: flex;
		width: 100%;
		border-bottom: 1px #f5f5f5 solid;
		height: 88rpx;
		line-height: 88rpx;
		overflow: hidden;
		/* color: #999; */
	}

	.order-box .head .f1 {
		display: flex;
		align-items: center;
		color: #222222
	}

	.order-box .head .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4px
	}

	.order-box .head .f1 .t1 {
		color: #06A051;
		margin-right: 10rpx
	}

	.order-box .head .f2 {
		color: #a5c44d
	}

	.order-box .head .f2 .t1 {
		font-size: 36rpx;
		margin-right: 4rpx
	}

	.order-box .content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 16rpx 0px;
		border-bottom: 1px solid #f5f5f5;
		position: relative
	}

	.order-box .content .f1 {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 .x1 {
		color: #a5c44d;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t1 .x2 {
		color: #a5c44d;
		font-size: 24rpx;
		margin-bottom: 8rpx
	}

	.order-box .content .f1 .t2 .img {
		width: 12rpx;
		height: 36rpx
	}

	.order-box .content .f1 .t3 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t3 .x1 {
		color: #a5c44d;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t3 .x2 {
		color: #a5c44d;
		font-size: 24rpx
	}

	.order-box .content .f2 {}

	.order-box .content .f2 .t1 {
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
		line-height: 50rpx;
		margin-bottom: 6rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t2 {
		font-size: 24rpx;
		color: #222222;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t3 {
		font-size: 30rpx;
		color: green;
		font-weight: bold;
		line-height: 50rpx;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f3 {
		width: 60rpx;
		height: 60rpx;
		font-size: 50rpx;
		color: #a5c44d;
		height: 60rpx
	}

	.orderinfo {
		width: 94%;
		margin: 20rpx 3%;
		margin-top: 10rpx;
		padding: 14rpx 3%;
		background: #FFF;
		border-radius: 8px
	}

	.orderinfo .box-title {
		color: #161616;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold
	}

	.orderinfo .item {
		display: flex;
		width: 100%;
		padding: 10rpx 0;
	}

	.orderinfo .item .t1 {
		width: 200rpx;
		color: #161616
	}

	.orderinfo .item .t2 {
		flex: 1;
		text-align: right;
		color: #222222
	}

	.orderinfo .item .red {
		color: red
	}

	.bottom {
		z-index: 1;
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.bottom .f1 {
		width: 188rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #373C55;
		border-right: 1px solid #EAEEED
	}

	.bottom .f1 .img {
		width: 44rpx;
		height: 44rpx
	}

	.bottom .f2 {
		width: 188rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #373C55
	}

	.bottom .f2 .img {
		width: 44rpx;
		height: 44rpx
	}

	.bottom .btn1 {
		z-index: 1;
		flex: 1;
		background: linear-gradient(-90deg, #a5c44d 0%, #a5c44d 100%);
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
	}

	.form-uploadbtn {
		text-align: center;
		/* line-height: 270rpx; */
		/* float: left; */
		margin: 30rpx;
		height: 150rpx;
		width: 150rpx;


	}

	.form-imgbox {
		font-size: 24rpx;
	}

	.form-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		color: #999;
		font-size: 32rpx;
		background: #fff;
		width: 100%;
		height: 100%
	}

	.form-imgbox-img {
		display: block;
		margin: 30rpx;
		width: 150rpx;
		height: 150rpx;
		border: #d3d3d3 1px solid;
	}

	.image {
		margin: 0 auto;
		/* 		max-width: 150rpx;
		max-height: 150rpx; */
		height: 150rpx;
		width: 150rpx;
		float: left;
		padding: 5rpx;
	}

	.flex {
		flex-wrap: wrap;
		width: 100%;
	}

	.detail_info {
		width: 40rpx;
		height: 40rpx;
		display: block;
		margin: auto;
	}

	.title_img1 {
		background-color: rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		/* 		max-width: 150rpx;
			max-height: 150rpx; */
		height: 150rpx;
		width: 150rpx;
		border-radius: 15rpx;
	}

	.divider {
		height: 1px;
		background-color: #ddd;
		/* 分割线颜色 */
	}

	.map {
		width: 100%;
		/* height: 500rpx; */
		overflow: hidden
	}

	.map_bg {
		/* width: 94%; */
		/* margin: 20rpx 3%; */
		/* margin-top: 10rpx; */
		/* padding: 14rpx 3%; */
		background: #fffee5;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.over_time_title {
		text-align: center;
		background-color: #999;
		font-size: 35rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.classifyBigBox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 10rpx;
		padding: 20rpx;
	}

	.oneClassify {
		display: flex;
		align-items: center;
		padding: 10rpx;
		justify-content: center;
		background: F7F7F7;
		border-radius: 13rpx;
		color: #000000;
		border: 2rpx solid #7f7f7f;
	}

	.selectActive {
		background: #2851F3;
		color: #FFFFFF;
	}

	.onConfirmFiltrate {
		width: 50%;
		padding: 17rpx;
		background: #a5c44d;
		color: #FFFFFF;
		border-radius: 13rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.cost_detail {
		width: 100%;
		padding: 30rpx;
		background-color: #FFFFCC;
		border-radius: 20rpx;
		position: fixed;
		bottom: 40%;
		z-index: 3;
	}

	.tl-flex-center1 {
		display: flex;
		text-align: center;
		margin-top: 30rpx;
	}

	.mask {
		width: 100%;
		height: 100%;
		background-color: lightgray;
		opacity: 0.9;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 2;
	}
	
	.tl-btn-120{
		width: 50%;
		padding: 17rpx;
		background: #909090;
		color: #FFFFFF;
		border-radius: 13rpx;
		text-align: center;
		margin-left: 20rpx;
	}
	
	.textarea {
		height: 140rpx;
		line-height: 40rpx;
		overflow: hidden;
		flex: 1;
		border: 1px solid #888888;
		border-radius: 2px;
		/* padding: 8rpx; */
		z-index: 0;
		
	}
	
	.posterDialog {
		position: fixed;
		z-index: 9;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		top: var(--window-top);
		left: 0
	}
	
	.posterDialog .main {
		width: 80%;
		margin: 60rpx 10% 30rpx 10%;
		background: #fff;
		position: relative;
		border-radius: 20rpx
	}
	
	.posterDialog .close {
		position: absolute;
		padding: 20rpx;
		top: 0;
		right: 0
	}
	
	.posterDialog .close .img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.posterDialog .content {
		width: 100%;
		padding: 70rpx 20rpx 30rpx 20rpx;
		color: #333;
		font-size: 30rpx;
		text-align: center
	}
	
	.posterDialog .content .img {
		width: 540rpx;
		height: 960rpx
	}
	
	.popup {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
	}
	
	.popup .popup-box {
		background-color: #fff;
		width: 80%;
		/* height: 40%; */
		margin: 60% auto 0rpx;
		padding: 20rpx; 
		border-radius: 10rpx; 
		box-sizing: border-box; 
		overflow: auto; 
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
	}
	
	.popup .popup-box .btn-box{
		display: flex; 
	    justify-content: space-between;
		align-items: center;
		
	}
	
	.popup .popup-box .btn-box .btn{
		margin-top: 80rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.popup .popup-box .btn-box .cancel{
		background-color: #fff;
		color: #000;
		border-radius: 10rpx; 
	    border: 1rpx solid #ccc; 
	    text-align: center;
	}
	.popup .popup-box .btn-box .confirm{
	    background-color: #1BA035;
	    color: #fff; 
	    border-radius: 10rpx; 
		text-align: center;
		width: 100%;
	}
	
</style>